<template>
  <view class="code-item" :class="{ over: modal.status }" :key="modal.status + '_' + modal.skuBarcode">
    <m-qrcode
      :options="{
        code: modal.skuBarcode,
        size: 117,
        bgColor: '#f5f7f8',
        color: modal.status ? '#000' : '#A6A8A8',
      }"
      ref="qrcode"
    />
    <text>{{ modal.skuBarcode }}</text>
  </view>
</template>

<script>
export default {
  props: {
    modal: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  components: {},
}
</script>

<style lang="scss" scoped>
.code-item {
  width: 217rpx;
  background: #f5f7f8;
  border-radius: 8rpx;
  overflow: hidden;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0 20rpx;
  position: relative;
  &.over {
    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.2);
    }
    text {
      color: #000;
      font-weight: bold;
    }
  }
  text {
    color: #4d5d6d;
    font-size: 26rpx;
    margin-top: 10rpx;
  }
}
</style>
